<script setup lang="ts">
import { list } from "./dataList";
import { reactive, ref } from "vue";
const dataList = reactive(list);
import { Platform, Document } from "@element-plus/icons-vue";
import inputArr from "./components/inputarr.vue";
const formList = [
  { label: "活动时间", value: "2024-03-07至2024-10-07" },
  { label: "活动主题", value: "4月份老年人活动专场" },
  { label: "收益人数", value: "1000" },
  { label: "主讲人/专家", value: "孙小小" },
  {
    label: "活动地点",
    type: "tag",
    value: ["浙江省/杭州市/滨江区/长河街道", "浙江省/杭州市/滨江区/长河街道"]
  },
  { label: "组织成员", type: "tag", value: ["孙小小", "张小小"] },
  { label: "志愿者", type: "tag", value: ["孙小小", "张小小"] }
];
</script>

<template>
    <div class="text-[16px] mt-[15px] mb-[20px]">
      <span class="font-bold">项目名称：</span>社区邻里国际共融服务项目
    </div>
    <el-form label-width="100px" class="elFormFlex">
      <el-form-item
        v-for="(item, index) in formList"
        :key="index"
        :label="item.label"
        :class="{ 'w-full': item.type == 'tag' }"
      >
        <template v-if="item.type == 'tag'">
          <el-tag
            type="primary"
            class="mr-[10px]"
            v-for="chind in item.value"
            >{{ chind }}</el-tag
          >
        </template>
        <template v-else>
          <el-input :value="item.value" disabled></el-input>
        </template>
      </el-form-item>
    </el-form>
    <div v-for="(item, index) in dataList" class="mb-[40px]">
      <div class="flex items-center justify-between">
        <div class="flex !w-1/2 items-center">
          <el-icon class="mr-[10px]" :size="30" color="#409EFF"
            ><Platform :size="90"
          /></el-icon>
          <el-text>{{ item.title }}</el-text>
        </div>
      </div>
      <div
        class="p-[20px] mt-[20px] rounded-[4px]"
        style="background: #f7f8fa"
        v-if="item.type == 'input'"
      >
        <inputArr :lists="item.children" show />
      </div>
      <div v-if="item.type == 'image'">
        <el-descriptions
          :column="2"
          border
          v-for="(chindItem, index) in item.children"
          class="mr-[30px] pr-[40px] mt-[20px] relative"
        >
          <el-descriptions-item label="照片" width="150" :span="2">
            <el-image
              class="mr-[10px]"
              v-for="chind in chindItem.imageList"
              style="width: 100px; height: 100px"
              :src="chind.url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :initial-index="4"
              :preview-src-list="chindItem.imageList.map(item => item.url)"
              fit="cover"
            />
          </el-descriptions-item>
          <el-descriptions-item label="照片说明" width="150">
            <el-text>{{ chindItem.content }}</el-text>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div
        class="p-[20px] mt-[20px] rounded-[4px]"
        style="background: #f7f8fa"
        v-if="item.type == 'file'"
      >
        <ul class="el-upload-list el-upload-list--text">
          <li
            class="el-upload-list__item is-success"
            v-for="items in item.children"
          >
            <div class="el-upload-list__item-info">
              <a class="el-upload-list__item-name">
                <el-icon><Document /></el-icon
                ><span
                  class="el-upload-list__item-file-name"
                  title="element-plus-logo.svg"
                  >{{ items.name }}</span
                ></a
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<style lang="scss" scoped>
.elFormFlex {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 33%;
    &.w-full {
      width: 100%;
    }
  }
}
</style>
